<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-回调函数</title>
</head>
<body>
    <button id="btn">回调按钮</button>
    <script>
        /*
            回调函数：函数接收另一个函数作为参数的时候，被当做参数的这个函数，就叫做回调函数
                     函数 a 的实际参数为函数 b，那么函数 b 就是函数 a 的回调函数
            使用场景：
                    1. 通过事件调用回调函数
                    2. ajax 前后端数据交互的时候，会使用回调函数
        */ 

        // function fn(a){
        //     a();
        // }

        // fn(true);  // 布尔值
        // fn(undefined);  // undefined
        // fn(null);  // null
        // fn('admin');  // 字符串
        // fn({name:'李四',age:20}); // 对象

        // fn(function(){
        //     console.log('我被调用了');
        // })

        /*  
            原来形参位置接收的都是字符串、数字、null、undefined...
            现在可以给形参接收一个函数
        */ 
        // function a(b){
        //     b();
        // }

        // function b(){
        //     console.log('我是实参b');
        // }

        // a(b);


        // function a(param){
        //     param++;
        //     console.log(param);
        // }

        // a(12);

        // function a(param){
        //     param();
        // }

        // function fn(){
        //     console.log('我是实参 fn 函数，我被当做参数传递给了 a 函数，已被调用')
        // }

        // a(fn);

        /*
            可以直接在函数体内调用某一个函数，但是这样会将整个的函数运行写死，降低函数的灵活性
            回调函数的作用就是将某个函数作为参数传递进来，实现同一个函数，通过接收不同的回到函数，来实现不同的效果
        */ 
        // function f1(){
        //     return 1;
        // }

        // function f2(){
        //     return 'fff';
        // }

        // function fn(param){
        //     return 1 + param();
        // }

        // console.log(fn(f1));  // 2
        // console.log(fn(f2));  // 1fff

        // 回调函数应用
        // onclick 单击事件后面的控制具体操作步骤的函数，就是一个典型的回调函数
        // var btn = document.getElementById('btn');
        // btn.onclick = function(){  
        //     console.log('回调函数被调用了');
        // }
    </script>
</body>
</html>